import React from 'react';
import {
  Container,
  Paper,
  Typography,
  Button,
  Box,
} from '@mui/material';
import {
  ErrorOutline,
  Home,
  Refresh,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

interface ErrorPageProps {
  title?: string;
  message?: string;
  showRetry?: boolean;
  showHome?: boolean;
  onRetry?: () => void;
}

const ErrorPage: React.FC<ErrorPageProps> = ({
  title = '出错了',
  message = '很抱歉，发生了一个错误。请稍后重试。',
  showRetry = true,
  showHome = true,
  onRetry,
}) => {
  const navigate = useNavigate();

  const handleRetry = () => {
    if (onRetry) {
      onRetry();
    } else {
      window.location.reload();
    }
  };

  const handleGoHome = () => {
    navigate('/');
  };

  return (
    <Container maxWidth="md" sx={{ mt: 4, flex: 1, display: 'flex', alignItems: 'center' }}>
      <Paper
        elevation={3}
        sx={{
          p: 4,
          textAlign: 'center',
          borderRadius: 2,
          width: '100%',
        }}
      >
        <Box sx={{ mb: 3 }}>
          <ErrorOutline
            sx={{
              fontSize: 64,
              color: 'error.main',
              mb: 2,
            }}
          />
          <Typography variant="h4" component="h1" gutterBottom>
            {title}
          </Typography>
          <Typography
            variant="body1"
            color="text.secondary"
            sx={{ mb: 3, maxWidth: 500, mx: 'auto' }}
          >
            {message}
          </Typography>
        </Box>

        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
          {showRetry && (
            <Button
              variant="contained"
              startIcon={<Refresh />}
              onClick={handleRetry}
              size="large"
            >
              重试
            </Button>
          )}
          {showHome && (
            <Button
              variant="outlined"
              startIcon={<Home />}
              onClick={handleGoHome}
              size="large"
            >
              返回首页
            </Button>
          )}
        </Box>
      </Paper>
    </Container>
  );
};

export default ErrorPage;